<template>
  <div>
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <div class="dialog-center-top">
          <ul>
            <li :class="{ active: active == 1 }" @click="active = 1">
              微信银行
              <h5 v-show="active == 1"></h5>
            </li>
            <li :class="{ active: active == 2 }" @click="active = 2">
              下载APP
              <h5 v-show="active == 2"></h5>
            </li>
            <li :class="{ active: active == 3 }" @click="active = 3">
              企业网银
              <h5 v-show="active == 3"></h5>
            </li>
          </ul>
        </div>
        <div class="dialog-center-bottom">
          <div class="dialog-center-bottom-center" v-show="active == 1">
            <img src="@/assets/image/组91.png" alt="" />
            <div>
              <p>请您扫描二维码进入中国邮政储蓄银行</p>
              <p>微信银行完成后续操作</p>
            </div>
          </div>
          <div class="dialog-center-bottom-center" v-show="active == 2">
            <img src="@/assets/image/组91.png" alt="" />
            <div>
              <p>请您扫码下载邮储企业银行</p>
              <p>APP完成后续操作</p>
            </div>
          </div>
          <div class="dialog-center-bottom-center" v-show="active == 3">
            <div>
              <p>请您前往中国邮政储蓄银行</p>
              <p>企业网银完成后续操作</p>
            </div>
            <div class="btn">立即前往</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    open: {
      type: Boolean,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      activeName: "first",
      active: 1,
    };
  },
  watch: {
    open() {
      this.dialogVisible = this.open;
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close", this.dialogVisible);
    },
  },
};
</script>

<style lang="scss" scoped>
// 弹出框
.dialog-center {
  width: 2.5781rem;
  height: 2.2396rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .dialog-center-top {
    width: 100%;
    height: 0.4167rem;
    background-color: #f4f4f4;
    ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        flex: 1;
        height: 100%;
        font-size: 0.1146rem;
        font-weight: bold;
        color: #26303b;
        text-align: center;
        h5 {
          position: absolute;
          bottom: 0.026rem;
          width: 0.1771rem;
          height: 0.026rem;
          background: #3f6ef2;
        }
        &.active {
          background: #fff;
        }
      }
    }
  }
  .dialog-center-bottom {
    width: 100%;
    height: 2.6042rem;
    .dialog-center-bottom-center {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      img {
        width: 0.8073rem;
        height: 0.8073rem;
      }
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #1a1a1a;
          margin-bottom: 0.0417rem;
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 0.625rem;
        height: 0.1667rem;
        background: #3f6ef2;
        border-radius: 0.0104rem;
        font-size: 0.0938rem;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  width: 2.5833rem !important;
}
::v-deep .el-dialog__body {
  padding: 0 0 0.1042rem 0 !important;
}
::v-deep .el-dialog__header {
  height: 0.1042rem;
  border-bottom: 0px;
}
</style>
